<script setup>
import {ref} from 'vue'
import { useUserStore } from "../store/user"
import { useModalStore } from "../store/modal"

const user =  useUserStore();
const modal =  useModalStore();

const account = ref("");
const password = ref("");
</script>
<template>
   <el-dalog width="400px" v-model="modal.loginVisible" class="relative">
    <h1 class="text-center c-#404040 text-22px font-normal mb-1.5">账号登录</h1>
    <div class="pb-44px flex items-center justify-center w-full">
      <el-from name="login">
        <el-from-item name="account">
            <el-input placeholder="请输入账号" v-model="account"></el-input>
        </el-from-item>
        <el-from-item name="password">
            <el-input type="password" placeholder="请输入密码" v-model="password"></el-input>
         </el-from-item>
         <el-from-item>
            <el-button type="primary" @click="user.login(account,password)" 
            class="flex w-full items-center justify-center
                     bg-#444b52 text-white rounded-full">立即登录</el-button>
         </el-from-item>
      </el-from>
    </div>
    <div class="absolute w-full h-44px bottom-0 left-0 items-center justif bg-[rgba(77,85,93,0.1)]">
     <sapn>没有账号?</sapn>
     <sapn class="text-blue-400 cursor-pointer" @click="()=>{
         modal.switchRegVisible();
            modal.switchLoginVisible();
     }">立即注册</sapn>
    </div>
   </el-dalog>
</template>